import React from 'react';
import Icon from 'antd/lib/icon';
import { Link } from 'react-router';

export default class Portals extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            open: false
        };
    }

    handleOpen(){
        this.setState({
            open: !this.state.open
        });
    }

    handleSwitchPortal(portal){
        this.props.handleSwitchPortal(portal);
        this.setState({
            open: false
        });
    }

    render(){

        var show;
        if(this.state.open){
            show = 'block';
        }else{
            show = 'none';
        }

        var _this = this;
        var portals = [];
        this.props.portals.map(function(portal){
            portals.push(
                <div key={portal} style={{height:'30px',textAlign:'center',lineHeight:'30px'}} onClick={_this.handleSwitchPortal.bind(_this, portal)}>{portal}</div>
            );
        });
        portals.push(
            <Link key="我的收藏" to="favoritepage" style={{color:"#fff"}}><div style={{height:'30px',textAlign:'center',lineHeight:'30px'}} >我的收藏</div></Link>
        );
        portals.push(
            <Link key="我的审批" to="/approval" style={{color:"#fff"}}><div style={{height:'30px',textAlign:'center',lineHeight:'30px'}} >我的审批</div></Link>
        );
        portals.push(
            <Link key="我的设置" to="/mysettingpage" style={{color:"#fff"}}><div style={{height:'30px',textAlign:'center',lineHeight:'30px'}} >我的设置</div></Link>
        );
        
        return (
            <div>
                <div className="top-header-bar">
                    <i className="fa fa-align-justify pull-left top-menu-layout" aria-hidden="true" onClick={this.handleOpen.bind(this)}></i>{this.props.portal}
                    <Link to="searchpage"><i onClick={this.props.onGoToSearch} className="fa fa-search" style={{width: "10%",fontSize: "1.6rem",margin:"0.4rem",float: "right",color:"#fff", textAlign:"right"}}></i></Link>
                </div>
                <div style={{position:'fixed',top:'2.4rem', bottom:'0px',width:'150px',backgroundColor:'#222222', color:'#fff',zIndex:'999',display:show}}>
                    {portals}
                </div>
                <div onClick={this.handleOpen.bind(this)} style={{position: "fixed",width:"100%",height:"200%",zIndex:'998',bottom: "0px",top:"0px",left:"0px",right:"0px",backgroundColor: "rgba(99, 99, 99, 0.4)",display:show}}>
                </div>
            </div>);
    }
}